<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <div
      class="h-16 bg-white shadow-sm flex items-center px-6 justify-between border-b"
    >
      <div class="flex items-center space-x-3">
        <el-icon class="text-blue-600 text-2xl"><Message /></el-icon>
        <span class="text-xl font-semibold tracking-tight">邮箱</span>
      </div>
      <div class="flex items-center space-x-4">
        <div class="relative search-input w-72">
          <input
            type="text"
            placeholder="搜索邮件内容"
            class="pl-10 pr-4 py-2.5 w-full rounded-lg border-none bg-gray-50 focus:ring-2 focus:ring-blue-500/20 focus:outline-none text-sm"
          />
          <el-icon class="absolute left-3 top-1/2 transform -translate-y-1/2"
            ><Search
          /></el-icon>
        </div>
        <div class="flex items-center space-x-3 text-gray-700">
          <el-avatar size="small" class="bg-blue-100 text-blue-600"
            >A</el-avatar
          >
          <span class="text-sm">admin@company.com</span>
        </div>
      </div>
    </div>
    <div class="flex">
      <!-- 左侧导航 -->
      <div class="w-56 bg-white h-[calc(100vh-4rem)] shadow-sm">
        <div class="p-4">
          <button
            @click="selectedTab = 'writemail'"
            class="w-full bg-blue-600 hover:bg-blue-700 transition-colors text-white px-4 py-2.5 rounded-lg flex items-center justify-center space-x-2 !rounded-button whitespace-nowrap shadow-sm"
          >
            <el-icon><Edit /></el-icon>
            <span class="font-medium">写邮件</span>
          </button>
        </div>
        <div class="space-y-0.5 pt-2">
          <div
            class="flex items-center px-4 py-2.5 text-gray-600 font-medium rounded-lg mx-2"
            @click="selectedTab = 'inbox'"
            :class="{ 'bg-blue-50': selectedTab === 'inbox' }"
          >
            <el-icon class="mr-3 text-lg"><ChatDotSquare /></el-icon>
            <span>收件箱</span>
            <span
              class="ml-auto bg-red-600 text-white text-xs px-2 py-0.5 rounded-full"
              >12</span
            >
          </div>
          <div
            class="flex items-center px-4 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg mx-2 cursor-pointer"
            @click="selectedTab = 'draft'"
            :class="{ 'bg-blue-50': selectedTab === 'draft' }"
          >
            <el-icon class="mr-3 text-lg"><Document /></el-icon>
            <span>草稿箱</span>
            <span class="ml-auto text-gray-400 text-xs">3</span>
          </div>
          <div
            class="flex items-center px-4 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg mx-2 cursor-pointer"
            @click="selectedTab = 'sent'"
            :class="{ 'bg-blue-50': selectedTab === 'sent' }"
          >
            <el-icon class="mr-3 text-lg"><Memo /></el-icon>
            <span>已发送</span>
            <span class="ml-auto text-gray-400 text-xs">24</span>
          </div>
        </div>
      </div>
      <!-- 右侧内容区 写邮件-->
      <div class="flex-1 p-6" v-if="selectedTab === 'writemail'">
        <div class="bg-white rounded-lg border">
          <!-- 收件人区域 -->
          <div class="p-4 border-b">
            <div class="flex items-center mb-4">
              <span class="w-20 text-gray-600">收件人：</span>
              <el-input
                v-model="to"
                placeholder="请输入收件人邮箱"
                class="flex-1"
              />
            </div>
            <div class="flex items-center mb-4">
              <span class="w-20 text-gray-600">抄送：</span>
              <el-input
                v-model="cc"
                placeholder="请输入抄送邮箱"
                class="flex-1"
              />
            </div>
            <div class="flex items-center">
              <span class="w-20 text-gray-600">主题：</span>
              <el-input
                v-model="subject"
                placeholder="请输入邮件主题"
                class="flex-1"
              />
            </div>
          </div>

          <!-- 工具栏 -->
          <div class="flex items-center p-2 border-b bg-gray-50">
            <el-button class="!rounded-button whitespace-nowrap">
              <el-icon><Document /></el-icon>
              附件
            </el-button>
            <el-button class="ml-2 !rounded-button whitespace-nowrap">
              <el-icon><Picture /></el-icon>
              图片
            </el-button>
            <div class="h-4 mx-4 border-r"></div>
            <el-button class="!rounded-button whitespace-nowrap">
              <el-icon><Edit /></el-icon>
              存草稿
            </el-button>
            <el-button
              type="primary"
              class="ml-2 !rounded-button whitespace-nowrap"
            >
              <el-icon><Position /></el-icon>
              发送
            </el-button>
          </div>

          <!-- 编辑区 -->
          <div class="p-4">
            <el-input
              v-model="content"
              type="textarea"
              :rows="12"
              placeholder="请输入邮件正文内容"
            />
          </div>
        </div>
      </div>
      <!-- 右侧内容区 收件箱-->
      <div class="flex-1 p-6" v-if="selectedTab === 'inbox'">
        <div class="bg-white rounded-lg shadow">
          <!-- 工具栏 -->
          <div class="flex items-center space-x-2 p-4 border-b">
            <el-checkbox />
            <button
              class="flex items-center px-3 py-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors !rounded-button whitespace-nowrap"
            >
              <el-icon class="text-lg"><Delete /></el-icon>
              <span class="ml-1.5 text-sm">删除</span>
            </button>
            <button
              class="flex items-center px-3 py-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors !rounded-button whitespace-nowrap"
            >
              <el-icon class="text-lg"><Star /></el-icon>
              <span class="ml-1.5 text-sm">标记星标</span>
            </button>
            <button
              class="flex items-center px-3 py-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors !rounded-button whitespace-nowrap"
            >
              <el-icon class="text-lg"><Reading /></el-icon>
              <span class="ml-1.5 text-sm">标记已读</span>
            </button>
          </div>
          <!-- 邮件列表 -->
          <div class="divide-y divide-gray-100">
            <div
              v-for="(mail, index) in mailList"
              :key="index"
              class="flex items-center p-4 hover:bg-blue-50/50 cursor-pointer transition-colors"
            >
              <el-checkbox class="mr-4" />
              <el-icon class="text-yellow-500 mr-4 text-lg"><Star /></el-icon>
              <div class="flex-1 min-w-0">
                <div class="flex items-center">
                  <span class="font-medium truncate text-gray-900">{{
                    mail.sender
                  }}</span>
                  <span class="ml-auto text-sm text-gray-500">{{
                    mail.time
                  }}</span>
                </div>
                <div class="text-gray-600 truncate mt-1.5 text-sm">
                  {{ mail.subject }}
                </div>
                <div class="text-gray-400 truncate mt-1 text-sm">
                  {{ mail.preview }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容区 草稿箱-->
      <div class="flex-1 p-6" v-if="selectedTab === 'draft'">
        <!-- 草稿箱界面 -->
        <div class="bg-white rounded-lg shadow">
          <!-- 工具栏 -->
          <div class="flex items-center space-x-2 p-4 border-b">
            <el-checkbox />
            <button
              class="flex items-center px-3 py-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors !rounded-button whitespace-nowrap"
            >
              <el-icon class="text-lg"><Delete /></el-icon>
              <span class="ml-1.5 text-sm">删除</span>
            </button>
          </div>
          <!-- 邮件列表 -->
          <div class="divide-y divide-gray-100">
            <div
              v-for="(mail, index) in draftMailList"
              :key="index"
              class="flex items-center p-4 hover:bg-blue-50/50 cursor-pointer transition-colors"
            >
              <el-checkbox class="mr-4" />
              <el-icon class="text-yellow-500 mr-4 text-lg"><Star /></el-icon>
              <div class="flex-1 min-w-0">
                <div class="flex items-center">
                  <span class="font-medium truncate text-gray-900">{{
                    mail.sender
                  }}</span>
                  <span class="ml-auto text-sm text-gray-500">{{
                    mail.time
                  }}</span>
                </div>
                <div class="text-gray-600 truncate mt-1.5 text-sm">
                  {{ mail.subject }}
                </div>
                <div class="text-gray-400 truncate mt-1 text-sm">
                  {{ mail.preview }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容区 已发送-->
      <div class="flex-1 p-6" v-if="selectedTab === 'sent'">
        <!-- 已发送的邮件界面 -->
        <div class="bg-white rounded-lg shadow">
          <!-- 工具栏 -->
          <div class="flex items-center space-x-2 p-4 border-b">
            <el-checkbox />
            <button
              class="flex items-center px-3 py-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors !rounded-button whitespace-nowrap"
            >
              <el-icon class="text-lg"><Delete /></el-icon>
              <span class="ml-1.5 text-sm">删除</span>
            </button>
          </div>
          <!-- 邮件列表 -->
          <div class="divide-y divide-gray-100">
            <div
              v-for="(mail, index) in sentMailList"
              :key="index"
              class="flex items-center p-4 hover:bg-blue-50/50 cursor-pointer transition-colors"
            >
              <el-checkbox class="mr-4" />
              <el-icon class="text-yellow-500 mr-4 text-lg"><Star /></el-icon>
              <div class="flex-1 min-w-0">
                <div class="flex items-center">
                  <span class="font-medium truncate text-gray-900">{{
                    mail.sender
                  }}</span>
                  <span class="ml-auto text-sm text-gray-500">{{
                    mail.time
                  }}</span>
                </div>
                <div class="text-gray-600 truncate mt-1.5 text-sm">
                  {{ mail.subject }}
                </div>
                <div class="text-gray-400 truncate mt-1 text-sm">
                  {{ mail.preview }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref } from "vue";
import {
  Message,
  Search,
  User,
  Edit,
  Document,
  Delete,
  Star,
  Reading,
  Memo,
} from "@element-plus/icons-vue";

const mailList = ref([
  {
    sender: "系统安全中心",
    subject: "您的账号进行了异地登录确认",
    preview:
      "我们检测到您的账号在新的设备上登录，登录地点：广州市。如果这是您的操作，请忽略本条消息...",
    time: "09:30",
  },
  {
    sender: "王丽总监",
    subject: "Re: 2024年Q1季度营销策略会议纪要",
    preview:
      "各位好，关于下周的营销策略会议，我们需要重点讨论以下几个议题：1. 新产品市场投放计划 2. 社交媒体营销方案...",
    time: "昨天",
  },
  {
    sender: "技术运维部",
    subject: "【重要】系统架构升级及服务中断通知",
    preview:
      "为了提供更好的服务体验，我们计划于本周六凌晨2:00-4:00进行系统升级维护。届时以下服务将暂时中断：...",
    time: "昨天",
  },
  {
    sender: "人力资源部 Lisa",
    subject: "请查收：年终述职报告模板及提交指南",
    preview:
      "附件中包含了年终述职报告的详细模板，请各位同事参考模板要求，于下周五前提交个人述职报告...",
    time: "12-28",
  },
  {
    sender: "财务部 Jennifer",
    subject: "【提醒】本年度最后一批报销提交截止时间",
    preview:
      "请注意：2023年度最后一批费用报销的提交截止时间为12月29日18:00，请确保在截止时间前提交完整的报销材料...",
    time: "12-27",
  },
]);

const draftMailList = ref([
  {
    sender: "自己",
    subject: "草稿邮件1",
    preview: "这是一封草稿邮件的内容预览...",
    time: "今天",
  },
  {
    sender: "自己",
    subject: "草稿邮件2",
    preview: "这是一封草稿邮件的内容预览...",
    time: "昨天",
  },
]);

const sentMailList = ref([
  {
    sender: "自己",
    subject: "已发送邮件1",
    preview: "这是一封已发送邮件的内容预览...",
    time: "今天",
  },
  {
    sender: "自己",
    subject: "已发送邮件2",
    preview: "这是一封已发送邮件的内容预览...",
    time: "昨天",
  },
]);

const to = ref("");
const cc = ref("");
const subject = ref("");
const content = ref("");
const selectedTab = ref("inbox");
</script>


<style scoped>
.input-container {
  position: relative;
}

.input-container input {
  padding-left: 36px; /* 确保输入框内有足够的空间 */
}

.input-container .el-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #c0c4cc;
}

.el-checkbox__inner {
  border-color: #d1d5db !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: #2563eb !important;
  background-color: #2563eb !important;
}

/* 添加这些样式到你的CSS文件中 */
.search-input {
    position: relative;
}

.search-input .el-icon {
    position: absolute;
    left: 10px; /* 调整这个值以适应你的设计 */
    top: 50%;
    transform: translateY(-50%);
}

/* 新增的样式 */
.bg-blue-50 {
  background-color: #eefaff;
}
</style>

